<template>
  <div class="base-table">
    <!-- 表格 -->
    <el-table :data="data" style="width: 100%" @selection-change="selectionChange" v-bind="tableAttrConfig">
      <template v-for="(item, index) in propsList" :key="index">
        <!-- 多选列 -->
        <el-table-column v-if="item.type === 'selection'" type="selection" v-bind="item" />

        <!-- 序号列 -->
        <el-table-column v-else-if="item.type === 'index'" type="index" v-bind="item" />

        <!-- 其他列 -->
        <el-table-column v-else v-bind="item">
          <template #default="scope">
            <slot :name="item.slotName" :row="scope.row">
              {{ scope.row[item.prop] ?? "-" }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 表格分页 -->
    <div class="base-table-pagination" v-if="showPagination">
      <slot name="footer">
        <el-pagination v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.size" :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeChange"
          @current-change="currentChange" />
      </slot>
    </div>
  </div>
</template>

<script lang="js" setup>
const emit = defineEmits(["selectionChange", "update:pageInfo"]);

const props = defineProps({
  // 数据
  data: {
    type: Array,
    required: true,
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格每一列配置
  propsList: {
    type: Array,
    required: true,
  },
  // 分页器
  pageInfo: {
    type: Object,
    default: () => ({
      page: 1,
      size: 10,
    }),
  },
  // 表格配置
  tableAttrConfig: {
    type: Object,
    default: () => ({}),
  },
  // 是否显示分页
  showPagination: {
    type: Boolean,
    default: true,
  },
});

// 分页size change
const sizeChange = (size) => {
  emit("update:pageInfo", { ...props.pageInfo, size });
};

// 页码变化
const currentChange = (page) => {
  emit("update:pageInfo", { ...props.pageInfo, page });
};

// 多选选择事件
const selectionChange = (value) => {
  emit("selectionChange", value);
};
</script>

<style lang="less" scoped>
.base-table {
  .base-table-pagination {
    padding: 20px 0;

    .el-pagination {
      float: right;
    }
  }
}
</style>